<template>
  <div class="card-fold">
    <div class="card-fold-wrap" @click="handleFold(!foldValue)">
      <template v-if="foldValue">展开更多 <ve-icon class="fold-icon" name="arrow_bottom_1" size="28"></ve-icon></template>
      <template v-else>收起更多 <ve-icon class="fold-icon" name="arrow_top_1" size="28"></ve-icon></template>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const foldValue = ref(true)
  const emit = defineEmits(['change'])

  const handleFold = (value) => {
    foldValue.value = value
    emit('change', value)
  }

  defineExpose({
    handleFold,
  })
</script>

<style lang="less" scoped>
  .card-fold {
    width: 100%;
    &-wrap {
      margin: 0 auto;
      width: 220rpx;
      height: 44rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #3072f6;
      line-height: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .fold-icon {
        margin-left: 8rpx;
      }
    }
  }
</style>
